<script>
import {mapState} from "vuex";
export default {
    name: "App",
    data(){
        return {
            liuXiaoLe:500
        }
    },
    // mapState与计算属性结合使用
    // 使用方法一：数组
    // computed:mapState(["liuXiaoLe","geBinJie","renYiHao","shenXiaoXu"])

    // 使用方法二：对象
    // computed:mapState({
    //     gaoXiaoLe(state){
    //         return state.liuXiaoLe
    //     },
    //     geBinJie(state){
    //         return state.geBinJie
    //     },
    //     renYiHao(state){
    //         return state.renYiHao
    //     },
    //     shenXiaoXu(state){
    //         return state.shenXiaoXu
    //     }
    // })

    // 混用
    computed:{
        ...mapState(["geBinJie","renYiHao","shenXiaoXu"]),
        ...mapState({
            gaoXiaoLe(state){
                return state.liuXiaoLe
            }
        })
    }
}
</script>

<template>
    <div>
        <h3>App</h3>
        <button>刘小乐：{{$store.state.liuXiaoLe}}|{{gaoXiaoLe}}</button>
        <button>戈斌杰：{{$store.state.geBinJie}}|{{geBinJie}}</button>
        <button>任逸豪：{{$store.state.renYiHao}}|{{renYiHao}}</button>
        <button>沈晓旭：{{$store.state.shenXiaoXu}}|{{shenXiaoXu}}</button>
    </div>
</template>

<style scoped>
button{
    padding:5px;
    margin:5px;
}
</style>